<template>
  <div class="app-container">
    <el-dialog :title="'选择人员'" append-to-body
               :visible.sync="isShowUser"
               :close-on-click-modal="false"
               width="80%"
               class="dialog_collect"
               @open="handleOpenDialog"
               @close="handleCloseDialog">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="用户账号" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户账号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入姓名"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
            <el-option
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="appUserList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="主建id" align="center" prop="id" v-if="false"/>
        <el-table-column label="用户账号" align="center" prop="userName"/>
        <el-table-column label="姓名" align="center" prop="name"/>
        <el-table-column label="身份证号码" align="center" prop="idcard"/>
        <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat"/>
        <el-table-column label="身体状况" align="center" prop="physical"/>
        <el-table-column label="联系方式" align="center" prop="phonenumber"/>
        <el-table-column label="职位" align="center" prop="position" :formatter="positionFormat"/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <section slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </section>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listAppUser
  } from '@/api/basicInformation/appUser'

  import { getToken } from '@/utils/auth'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { validatenull } from '@/utils/validate'

  export default {
    name: 'AppUser',
    components: {
    },
    props: {
      isShowUser: {
        type: Boolean,
        default: false
      },
      collected2: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        idsTerminal: [],
        terminalNames: [],
        terminalNumbers: [],
        // 显示搜索条件
        showSearchTerminal: true,
        totalTerminal: 0,
        terminalList: [],
        titleTerminal: '选择终端设备',
        openTerminal: false,
        queryTerminalParams: {
          pageNum: 1,
          pageSize: 10,
          equipmentName: undefined,
          equipmentNumber: undefined,
          isBinding: '1'
        },
        userId: 0,
        idsShip: [],
        shipCodes: [],
        // 显示搜索条件
        showSearchShip: true,
        totalShip: 0,
        shipList: [],
        titleShip: '选择船只',
        openShip: false,
        queryShipParams: {
          pageNum: 1,
          pageSize: 10,
          shipName: undefined,
          shipCode: undefined
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // APP用户表格数据
        appUserList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 性别字典
        sexOptions: [],
        // 职位字典
        positionOptions: [],
        // 角色选项
        roleOptions: [],
        // 岗位选项
        postOptions: [],
        // 用户类型字典
        userTypeOptions: [],
        upload: {
          // 是否显示弹出层（巡护人员导入）
          open: false,
          // 弹出层标题（巡护人员导入）
          title: '',
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: 'Bearer ' + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + '/basicInformation/appUser/importData'
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          name: undefined,
          sex: undefined,
          userType: 2
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          userName: [
            { required: true, message: '用户账号不能为空', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          idcard: [
            { required: true, message: '用户身份证不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '用户密码不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleOpenDialog(){
        let userIds = this.collected2
        userIds = userIds.substring(0, userIds.lastIndexOf(','))
        this.queryParams.userIds = userIds
        this.getList()
        this.getDicts('sys_user_sex').then(response => {
          this.sexOptions = response.data
        })
        this.getDicts('app_s_post').then(response => {
          this.positionOptions = response.data
        })
        this.getDicts('user_type').then(response => {
          this.userTypeOptions = response.data
        })
      },
      handleCloseDialog() {
        this.$emit('closeDialog')
      },
      /** 查询APP用户列表 */
      getList() {
        this.loading = true
        listAppUser(this.queryParams).then(response => {
          this.appUserList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 性别字典翻译
      sexFormat(row, column) {
        return this.selectDictLabel(this.sexOptions, row.sex)
      },
      // 职位字典翻译
      positionFormat(row, column) {
        return this.selectDictLabel(this.positionOptions, row.position)
      },
      // 用户类型字典翻译
      userTypeFormat(row, column) {
        return this.selectDictLabel(this.userTypeOptions, row.userType)
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          userName: undefined,
          nickName: undefined,
          name: undefined,
          password: undefined,
          // 默认密码
          initPassword: undefined,
          idcard: undefined,
          sex: undefined,
          physical: undefined,
          contact: undefined,
          position: undefined,
          deptId: undefined,
          userType: 2,
          shipId: undefined,
          delFlag: undefined,
          createById: undefined,
          createBy: undefined,
          createTime: undefined,
          updateById: undefined,
          updateBy: undefined,
          updateTime: undefined,
          roleIds: []
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.userId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
        this.multipleSelection = selection
      },
      /** 提交按钮 */
      submitForm() {
        if (validatenull(this.multipleSelection)) {
          this.$message.warning('请选择人员!')
          return false
        }
        let list = ''
        const table = []
        this.multipleSelection.forEach((item, index) => {
          let ta = {}
          console.log('item=====>',item)
          ta.id = item.userId
          ta.name = item.name
          table.push(ta)
          list += item.userId + ','
        })
        this.handleSave(list, table)
      },
      handleSave(list, table) {
        const data = []
        data.push(list)
        data.push(table)
        this.handleCloseDialog()
        setTimeout(() => {
          this.$emit('ListSel', data)
        }, 10)
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog__footer {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -65px;
    padding: 15px;
    background: #f1f1f1;
  }
</style>
